<!-- 个人订单中心 -->
<template>
  <div class="order-detail-page" v-if="order">
    <!-- 头部商品订单状态 -->
    <DetailAction :order="order" />

    <!-- 步骤器 -->
    <DetailSteps :order="order" />

    <!-- 物流信息-Suspense适配async -->
    <Suspense v-if="[3, 4, 5].includes(order.orderState)">
      <!-- 组件加载完毕 -->
      <template #default>
        <DetailLogistics :order="order" />
      </template>
      <!-- 组件加载中显示 -->
      <template #fallback>
        <div class="loading">loading</div>
      </template>
    </Suspense>

    <!-- 订单信息 -->
    <OrderInfo :order="order" />
  </div>
</template>

<script>
import { findOrder } from "@/api/order";
import { ref } from "vue";
import { useRoute } from "vue-router";
import DetailAction from "./components/detail-action.vue";
import DetailSteps from "./components/detail-steps.vue";
import DetailLogistics from "./components/detailLogistics.vue";
import OrderInfo from "./components/orderInfo.vue";

export default ({
  name: "MemberOrder",
  components: { DetailAction, DetailSteps, DetailLogistics, OrderInfo },

  setup() {
    const route = useRoute()
    const order = ref(null)
    findOrder(route.params.id).then(data => {
      order.value = data.result
    })

    return { order }
  }
})
</script>

<style lang="less" scoped>
.order-detail-page {
  background: #fff;
}
</style>